{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <link rel="stylesheet" href="{% static "bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "MDB5-STANDARD-UI-KIT-Free-6.2.0/css/mdb.min.css" %}">

    <link rel="stylesheet" href="{% static "bootstrap-icons-1.10.4/font/bootstrap-icons.css" %}">
    <link rel="stylesheet" href="{% static "fontawesome-free-6.4.0-web/css/fontawesome.min.css" %}">
    <link rel="stylesheet" href="{% static "fontawesome-free-6.4.0-web/css/brands.min.css" %}">
    <link rel="stylesheet" href="{% static "fontawesome-free-6.4.0-web/css/solid.min.css" %}">

    {% block css %}{% endblock %}
</head>

<body>

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">管理系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">首页</a>
        </li>
          <li class="nav-item">
          <a class="nav-link" aria-current="page" href="/user/list">用户管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/depart/list">部门管理</a>
        </li>
          <li class="nav-item">
          <a class="nav-link" href="/numbers/list">号码管理</a>
        </li>

          <li class="nav-item">
          <a class="nav-link" href="/task/list">任务管理</a>
        </li>

      <li class="nav-item">
          <a class="nav-link" href="/order/list">订单管理</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              {% if request.session.info.name %}
              {{ request.session.info.name }}
              {% else %}
                  请登录
              {% endif %}
          </a>
          <ul class="dropdown-menu">
                {% if not request.session.info.name %}
            <li><a class="dropdown-item" href="/login/">登录</a></li>
                {% else %}
            <li><a class="dropdown-item" href="/logout/">注销</a></li>
                {% endif %}
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="/myadmin/list">管理员账户</a></li>
          </ul>
        </li>
      </ul>
        <ul class="navbar-nav navbar-right">
            <li class="nav-item">
                <a class="nav-link disabled">敬请期待</a>
            </li>
        </ul>
{#      <form class="d-flex" role="search">#}
{#          <input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">#}
{#          <button class="btn btn-outline-success " type="submit" style="width: 100px;"><strong>搜索</strong></button>#}
{#      </form>#}
    </div>
  </div>
</nav>

<div>
        {% block content %}{% endblock %}
</div>

<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
  <!-- Section: Social media -->
  <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
    <!-- Left -->
    <div class="me-5 d-none d-lg-block">
      <span>Get connected with us on social networks:</span>
    </div>
    <!-- Left -->

    <!-- Right -->
    <div>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-google"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fa-brands fa-github"></i>
      </a>
    </div>
    <!-- Right -->
  </section>
  <!-- Section: Social media -->

  <!-- Section: Links  -->
  <section class="">
    <div class="container text-center text-md-start mt-5">
      <!-- Grid row -->
      <div class="row mt-3">
        <!-- Grid column -->
        <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
          <!-- Content -->
          <h6 class="text-uppercase fw-bold mb-4">
            <i class="fas fa-gem me-3"></i>Company name
          </h6>
          <p>
            Here you can use rows and columns to organize your footer content. Lorem ipsum
            dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">
            Products
          </h6>
          <p>
            <a href="#" class="text-reset">Angular</a>
          </p>
          <p>
            <a href="#" class="text-reset">React</a>
          </p>
          <p>
            <a href="#" class="text-reset">Vue</a>
          </p>
          <p>
            <a href="#" class="text-reset">Laravel</a>
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">
            Useful links
          </h6>
          <p>
            <a href="#" class="text-reset">Pricing</a>
          </p>
          <p>
            <a href="#" class="text-reset">Settings</a>
          </p>
          <p>
            <a href="#" class="text-reset">Orders</a>
          </p>
          <p>
            <a href="#" class="text-reset">Help</a>
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
          <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
          <p>
            <i class="fas fa-envelope me-3"></i>
            info@example.com
          </p>
          <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
          <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
        </div>
        <!-- Grid column -->
      </div>
      <!-- Grid row -->
    </div>
  </section>
  <!-- Section: Links  -->

  <!-- Copyright -->
  <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
    © 2021 Copyright:
    <a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>
<!-- Footer -->

{#两个js导入顺序不能错#}
<script src="{% static "bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js" %}"></script>
<script src="{% static "jquery-3.6.4.min.js" %} "></script>
<script src="{% static "bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"%}"></script>

<script src="{% static "MDB5-STANDARD-UI-KIT-Free-6.2.0/js/mdb.min.js" %}"></script>

{% block js %}{% endblock %}
</body>
</html>